<template>
    <div class="receive-mode-container">
        <el-card>
            <template #header>
                <div class="card-header">
                    <div>
                        <el-input v-model="searchKeyword" placeholder="搜索方式名称" size="small"
                            style="width: 200px; margin-right: 10px" @input="filterTable" />
                        <el-button type="primary" icon="Plus" @click="openDialog">新增方式</el-button>
                        <el-button icon="Download" @click="exportTable">导出</el-button>
                    </div>
                </div>
            </template>

            <el-table :data="filteredData" border style="width: 100%">
                <el-table-column prop="code" label="方式编码" />
                <el-table-column prop="name" label="方式名称" />
                <el-table-column prop="description" label="描述" />
                <el-table-column label="状态">
                    <template #default="scope">
                        <el-switch v-model="scope.row.status" active-value="启用" inactive-value="停用"
                            @change="toggleStatus(scope.row)" />
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="140">
                    <template #default="scope">
                        <el-button size="small" @click="editRow(scope.row)">编辑</el-button>
                        <el-button size="small" type="danger" @click="deleteRow(scope.row.code)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <el-dialog v-model="dialogVisible" title="接货方式" width="500px">
            <el-form :model="form" label-width="100px">
                <el-form-item label="方式编码">
                    <el-input v-model="form.code" />
                </el-form-item>
                <el-form-item label="方式名称">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="描述">
                    <el-input v-model="form.description" type="textarea" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="saveForm">保存</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const searchKeyword = ref('')
const dialogVisible = ref(false)

interface ReceiveMode {
    code: string
    name: string
    description: string
    status: '启用' | '停用'
}

const rawData = ref<ReceiveMode[]>([
    { code: 'RM01', name: '人工搬运', description: '最基础方式', status: '启用' },
    { code: 'RM02', name: '叉车装卸', description: '使用电动叉车搬运', status: '启用' },
    { code: 'RM03', name: '传送带运输', description: '适用于流水线装卸', status: '启用' },
    { code: 'RM04', name: '自动化机器人', description: '自动识别路径', status: '停用' },
    { code: 'RM05', name: '吊装作业', description: '重型设备使用', status: '启用' },
    { code: 'RM06', name: '手推车', description: '短距离搬运', status: '启用' },
    { code: 'RM07', name: '地牛拖运', description: '常用于冷链', status: '停用' },
    { code: 'RM08', name: '滑轨装载', description: '集装箱内部滑轨操作', status: '启用' }
])

const filteredData = ref([...rawData.value])

const form = ref<ReceiveMode>({
    code: '',
    name: '',
    description: '',
    status: '启用'
})

function openDialog() {
    form.value = { code: '', name: '', description: '', status: '启用' }
    dialogVisible.value = true
}

function editRow(row: ReceiveMode) {
    form.value = { ...row }
    dialogVisible.value = true
}

function saveForm() {
    const index = rawData.value.findIndex(item => item.code === form.value.code)
    if (index > -1) {
        rawData.value[index] = { ...form.value }
    } else {
        rawData.value.push({ ...form.value })
    }
    filterTable()
    dialogVisible.value = false
}

function deleteRow(code: string) {
    rawData.value = rawData.value.filter(item => item.code !== code)
    filterTable()
}

function toggleStatus(row: ReceiveMode) {
    const index = rawData.value.findIndex(item => item.code === row.code)
    if (index !== -1) {
        rawData.value[index].status = row.status
        filterTable()
    }
}


function filterTable() {
    filteredData.value = rawData.value.filter(item =>
        item.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
    )
}

function exportTable() {
    const rows = filteredData.value
    const headers = ['方式编码', '方式名称', '描述', '状态']
    const keys = ['code', 'name', 'description', 'status']
    const csv = [
        headers.join(','),
        ...rows.map(row => keys.map(field => row[field as keyof ReceiveMode]).join(','))
    ].join('\n')

    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
    const link = document.createElement('a')
    link.href = URL.createObjectURL(blob)
    link.download = '接货方式数据.csv'
    link.click()
}
</script>

<style scoped>
.receive-mode-container {
    padding: 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>